<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('人员管理')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_location('人员管理', '用户管理')"></div>

		<div class="layui-row yy-margin-top-10">
			<!-- 查询 -->
			<div class="layui-collapse" lay-accordion="lay-accordion">
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">查询</h2>
					<div class="layui-colla-content layui-show">
						<div class="layui-form layui-form-pane">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">姓名</label>
									<div class="layui-input-inline">
										<input type="text" name="name" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">编号</label>
									<div class="layui-input-inline">
										<input type="text" name="userNum" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">状态</label>
									<div class="layui-input-inline">
										<input type="radio" name="status" title="正常" value="1" />
										<input type="radio" name="status" title="锁定" value="2" />
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label layui-bg-orange">性别</label>
									<div class="layui-input-inline">
										<input type="radio" name="sex" title="男" value="1" />
										<input type="radio" name="sex" title="女" value="2" />
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-inline">
										<button class="layui-btn yy-float-right" onclick="queryUser();">查询</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-row">
			<a class="layui-btn yy-margin-top-10" href="javascript:show();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'user:show'}">
				<i class="layui-icon">&#xe65d;</i> 查看
			</a>

			<a class="layui-btn yy-margin-top-10" th:href="@{'/user/userform/-1'}" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'user:add'}">
				<i class="layui-icon">&#xe654;</i> 添加
			</a>

			<a class="layui-btn yy-margin-top-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'user:update'}" onclick="edit();">
				<i class="layui-icon">&#xe642;</i> 编辑
			</a>

			<a class="layui-btn layui-btn-danger yy-margin-top-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'user:delete'}" onclick="del();">
				<i class="layui-icon">&#xe640;</i> 删除
			</a>

			<!-- 表格 -->
			<table id="userTable" class="yy-margin-top-10"></table>
		</div>

	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>

	<script th:inline="none">
	/*<![CDATA[*/

	var tableObj;
	var table;

	//查询
	var queryUser = function(){

		var name = $("input[name=name]").val();
		var userNum = $("input[name=userNum]").val();
		var status = $("input[name=status]:checked").val();
		var sex = $("input[name=sex]:checked").val();


		tableObj.reload({
			where:{
				name:name,
				status:status,
				usernum:userNum,
				sex:sex
			}
		});
	};

	;!function(){

		table = layui.table;

		tableObj = table.render({
			elem:"#userTable",
			id:"userTable",
			loading:true,
			url:"/user/userTable",
			skin:"line",
			even:true,
			cols:[[
				{field:"id", title:"id", width:0, fixed:'left', checkbox:true},
				{field:"name", title:"姓名", width:100, fixed:true},
				{field:"account", title:"帐号", width:100},
				{field:"user_num", title:"编号", width:100},
				{field:"status", title:"性别", width:70, sort:true, templet:'#sexTemp'},
				{field:"sex", title:"状态", width:70, sort:true, templet:'#statusTemp'},
				{field:"email", title:"邮编", width:200},
				{field:"phone", title:"电话", width:170},
				{field:"photo", title:"头像", width:170, templet:"#photoTemp"},
				{field:"create_date", title:"创建日期", width:120, sort:true},
				{field:"update_date", title:"更新日期", width:120, sort:true}
			]],
			page:true,
			height:'full',//自适应高度，数据多高表格多高
			limits:[10,30,50,100],
			limit:10,
			size:'lg'
		});

	}();

	//查看
	function show(id){
		var checkStatus = table.checkStatus('userTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		$.logs.info(checkStatus);
		var id = checkStatus.data[0].id;
		var href="/user/show/"+id;
		$.logs.info(href);
		window.location.href=href;
	}

	//编辑
	function edit(){
		var checkStatus = table.checkStatus('userTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		var id = checkStatus.data[0].id;
		var href="/user/userform/"+id;
		$.logs.info(href);
		window.location.href=href;
	}

	//删除
	function del(){
		var checkStatus = table.checkStatus('userTable');
		if(checkStatus.data.length <= 0 || checkStatus.data.length > 1){
			$.prompt.alert("请选择并且只能选择一条数据!");
			return;
		}
		var id = checkStatus.data[0].id;
		$.prompt.delPromptBox("确定要删除吗？", "/user/deluser/"+id, tableObj);
	}
	/*]]>*/
	</script>

	<script type="text/html" id="statusTemp">
	{{#  if(d.status == 1){ }}
		<span class="yy-text-color-red">正常</span>
	{{#  } else if(d.status == 2) { }}
		<span class="yy-text-color-gray">锁定</span>
	{{#  } }}
	</script>

	<script type="text/html" id="sexTemp">
	{{#  if(d.sex == 1){ }}
		<span class="yy-text-color-red">男</span>
	{{#  } else if(d.sex == 2) { }}
		<span class="yy-text-color-gray">女</span>
	{{#  } }}
	</script>

	<script type="text/html" id="photoTemp">
	<img src="{{d.photo}}">
	</script>

</body>

</html>